<template>
	<view class="oilcard">
		<view class="head">
			<image src="../../../static/home/youka.jpg" mode=""></image>
		</view>
		<view class="cards" >
					<view class="setcard" v-for="(item,index) in minecardlists">
						<view class="cardleft"  @click="selectcards(item)">
							<view class="cardmain">
								<view class="cardimg">
									 <image  :src="selectimg(item)" mode="" style="width: 100upx;height: 100upx;"></image>
								 </view>
								<view class="cardtext">
									 <view style="font-size: 40upx;font-weight: 600;color:#fff">{{selectoilname(item)}}</view>
									 <view style="font-size: 34upx;color:#fff">加油卡</view>
								 </view>
							</view>
							<view class="cardnumber">
								{{replaceStr(item.oilCardNumber)}}
							</view>
						</view>
						<view class="cardright">
							<view class="setmain" @click="setcards(item)">
								<image :src="seturl" mode="" style=""></image>
							</view>
						<!-- 	<view class="setmain" @click="addcards(item)">
								<image :src="addurl" mode=""></image>
							</view> -->
							<view class="setmain" @click="delcards(item,index)" >
								<image :src="delurl" mode="" ></image>
							</view>
						</view>
					</view>	
			</view>
			<u-loadmore :status="status" />
			<u-modal :show="show" content='是否删除当前油卡' @close="() => show = false" @confirm="delcardid" @cancel="nonecardid" :showCancelButton='true' :closeOnClickOverlay="true" ></u-modal>
	</view>
</template>

<script>
	import {
		zhekou,
		cardlist,
		yuecard,
		baocard,
		weicard,
		delcard,
		editcard
	} from '@/api/oilcard'
	export default {
		data() {
			return {
				status: 'nomore',
				oilcardindex:null,
				oilcardid:'',
				show:false,
				list: ['中国石化', '中国石油'],
				current: 0,
				cardimgurl:'../../../static/tabsIcon/shihua.png',
				seturl:'../../../static/tabsIcon/bianji.png',
				addurl:'../../../static/tabsIcon/addico.png',
				delurl:'../../../static/tabsIcon/delete.png',
				cardname:'中国石油',
				cardnumber:'',
				minecardlists:[],
			}
		},
		filters:{
			
		},
		onShow() {
			this.minecardlists = [];
			this.minecardlist();
			
		},
		mounted() {
			// this.minecardlist();
		},
		created() {
			
		},
		methods: {
			replaceStr(str) {
			    return str.replace(/(.{4})/g,'$1    ');
			},
			selectimg(url){
				let imgurl = '';
				if(url.type == 0){
					imgurl = '../../../static/tabsIcon/shihua.png'
				}else{
					imgurl = '../../../static/tabsIcon/shiyou.png'
				}
				return imgurl;
				
			},
			selectoilname(url){
				let name = '';
				if(url.type == 0){
					name = '中国石化'
				}else{
					name = '中国石油'
				}
				return name;
				
			},
			addcards(item){
				uni.navigateTo({
					url: './addoilCard'
				})
			},
			selectcards(item){
				uni.navigateTo({
					url: './oilCard?id=' + item.id
				})
			},
			setcards(item){
				uni.navigateTo({
					url: './editoilCard?id=' + item.id
				})
			},
			delcards(item,index){
				this.show = true;
				this.oilcardid = item.id;
				this.oilcardindex = index;
			},
			delcardid(){
				delcard(this.oilcardid).then(res => {
					if (res.success == 1) {
						uni.showToast({
							title: '删除成功',
							icon:'success',
							duration: 2000
						});
						this.minecardlists.splice(this.oilcardindex,1)
						this.show = false;
						this.oilcardid = '';
						this.oilcardindex = null;
					}
					else{
						uni.showToast({
							title: '删除失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
			nonecardid(){
				this.show = false;
				this.oilcardid = '';
				this.oilcardindex = null;
			},
			minecardlist(){
				this.status = 'loading';
				let sss = {
					type:''
				}
				cardlist(sss).then(res => {
					if (res.success == 1) {
						for(let sss in res.data){
							this.minecardlists.push(res.data[sss])
						}
						this.status = 'nomore';
					}
					else{
						uni.showToast({
							title: '查询失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color:#F1EFF2
	}
	.oilcard{
		width: 100%;
		.head{
			width: 100%;
			font-size: 0;
			overflow: hidden;
			font-size: 0;
			display: flex;
			align-items: center;
			image {
				width: 100%;
			}
		}
		.cards{
			border-radius: 20upx;
			padding-top: 20upx;
			padding-bottom: 20upx;
		}
		.setcard{
			background:linear-gradient(90deg, #da7b29 0%,#f3ad31 100%); 
			background-color: #f3ad31;
			height: 250upx;
			margin: 20upx;
			display: flex;
			border-radius: 20upx; 
			// padding-bottom: 80upx;
			.cardleft{
				// background-color: #0273F1;
				width: 85%;
				.cardmain{
					display: flex;
					padding-top: 20upx;
					align-items: center;
					.cardimg{
						background-color: #FFFFFF;
						border-radius: 999rem;
						overflow: hidden;
						margin-left: 40upx;
					}
					.cardtext{
						width: 55%;
						margin-left: 40upx;
					}
				}
				.cardnumber{
					color: #FFFFFF;
					margin-top: 40upx;
					margin-left: 40upx;
					word-spacing:20upx;
				}
			}
			.cardright{
				width: 15%;
				text-align: center;
				.setmain{
					margin: 15upx 0;
					image{
						width: 40upx;
						height: 40upx;
						background-color: #f1dcb6;
						border-radius: 999rem;
						padding: 10upx;
					}
				}
				// margin-right: ;
			}
			
			
		}
		.pricecard{
			display: flex;
			flex-wrap:wrap;
			margin-top: 20upx;
			justify-content: space-around;
			.prices{
				margin-top: 20upx;
				width: 47%;
				height: 150upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				.prices_top{
					margin-top: 20upx;
					margin-left: 30%;
				}
				.prices_bottom{
					margin-left: 30%;
					padding-left: 10upx;
					font-size: 30upx;
				}
			}
		}
		.bottom_price{
			display: flex;
			justify-content: space-around;
			margin-top: 40upx;
			border-top: 2upx solid #4D4D4D;
			.bottom_left{
				margin-top: 20upx;
			}
			.bottom_right{
				margin-top: 30upx;
				.bottom_right_btn{
					background:linear-gradient(#f8d07b 0%,#f49d4e  100%); 
					color: #FFFFFF;
					font-weight: 600;
					padding: 4upx 60upx;
					border-radius: 999rem;
				}
			}
		}
	}
</style>
